import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts'
function BarChart(props) {
    const chartRef = useRef(null)
    useEffect(() => {
        let chartDom = chartRef.current
        let myChart = echarts.init(chartDom);
        let option;
        let title = props.title
        option = {
            title: {
                text: title
            },
            xAxis: {
                type: 'category',
                data: ['Vue', 'React', 'Angular']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [10, 40, 70],
                    type: 'bar'
                }
            ]
        };
        option && myChart.setOption(option)
    }, [props.title])
    return (
        <div>
            <div ref={chartRef} style={{ width: '500px', height: '400px' }}></div>
        </div>
    );
}

export default BarChart;